<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<%@ include file="../common/common.jsp"%>
<link rel="stylesheet" href="${ctx}/page/shop/css/shoppingCart.css">
<script type="text/javascript" src="${ctx}/page/shop/js/shoppingCart.js"></script>
<title>购物车</title>
</head>
<body>
		<%@ include file="../common/header.jsp"%>
		<div class="container">
			<div class="row">
				<div class="col-md-9">
					<div class="panel panel-default">
						<div class="panel-body">
							<c:forEach items="${tempCart.items}" var="cartItem">
								<div id="media${cartItem.productId}${cartItem.productSkuRelId}" class="media">
									<div class="media-left">
										<label class="checkbox-inline media-left">
										  	<input type="checkbox" id="${cartItem.productId}${cartItem.productSkuRelId}" name="items" relId="${cartItem.productSkuRelId}" value="${cartItem.productId}">
										</label>
										<a class="media-left" href="${ctx}/product/${cartItem.productId}"> 
											<img src="${cartItem.smallImage}" class="avatar"/>
										</a>
									</div>
									<div class="media-body">
										<a style="color: #333333" class="title" href="${ctx}/product/${cartItem.productId}">
											<h5 class="media-heading">
												${cartItem.productName}
											</h5>
										</a>
										<button onclick="plus(1,'${cartItem.productId}','${cartItem.productName}','${cartItem.smallImage}','${cartItem.price}','${cartItem.productSkuRelId}')" class="label label-success">加</button>
											<small style="color: #666666" id="itemCounts${cartItem.productId}${cartItem.productSkuRelId}">${cartItem.counts}</small>
										<button onclick="plus(0,'${cartItem.productId}','${cartItem.productName}','${cartItem.smallImage}','${cartItem.price}','${cartItem.productSkuRelId}')" class="label label-default">减</button>
											&nbsp&nbsp 
										<small style="color: #666666" class="hidden-sm hidden-xs">规格:${cartItem.skuValue1}${cartItem.skuValue2}</small>
											&nbsp&nbsp 
										<small style="color: #666666" class="hidden-sm hidden-xs">单价:&yen<fmt:formatNumber type="number" value="${cartItem.price}" pattern="0.00" maxFractionDigits="2"/></small>
											&nbsp&nbsp 
										<small style="color: #666666" class="hidden-sm hidden-xs">小计:&yen<span id="itemValue${cartItem.productId}${cartItem.productSkuRelId}"><fmt:formatNumber type="number" value="${cartItem.value}" pattern="0.00" maxFractionDigits="2"/></span></small>
									</div>
								</div>
							</c:forEach>
						</div>
						<div class="panel-footer">
							<label class="checkbox-inline">
								<input type="checkbox" id="all" value="">
								<small>全选</small>
							</label>
							<a style="color: #666666" href="javascript:;" onclick="showDelTip()"><small>刪除选中的商品</small></a>
							<div class="">
 								总共
								<strong id="totalCounts">${tempCart.counts}</strong> 件商品
								&nbsp&nbsp总计
								<strong>&yen</strong>
								<strong id="totalValue1">
									<fmt:formatNumber type="number" value="${tempCart.value}" pattern="0.00" maxFractionDigits="2"/>
								</strong>
								&nbsp&nbsp共需
								<strong id="totalValue2" style="color: #c61822">
									<fmt:formatNumber type="number" value="${tempCart.value}" pattern="0.00" maxFractionDigits="2"/>
								</strong>
								积分
							</div>
							<button  class="btn btn-default accountButton" onclick="goAccount()">
								<span class="glyphicon glyphicon-shopping-cart"></span>去结算
							</button>
						</div>
					</div>
				</div>
				<div class="col-md-3 hidden-sm hidden-xs">
					<c:if test="${member ne null}">
						<%@ include file="../include/memberInfoInShop.jsp"%>
					</c:if>
				</div>
			</div>
		</div>
		<%@ include file="../common/footer.jsp"%>
	
	<!-- 操作提示弹出框 -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog modal-sm">
	    <div class="modal-content">
	      <div class="modal-body">
	        	<span id="myMsg"></span>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
	        <button onclick="delSure()" type="button" class="btn btn-primary">确定</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<script type="text/javascript">
		function showDelTip(){
			var prdtIdStr="";
			$("[name=items]:checkbox:checked").each(function(){
				var productId = $(this).val();
				prdtIdStr+=productId;
			});
			if(prdtIdStr==""){
				showTip2("未选中任何商品");
				return;
			}
			$('#myModal').on('show.bs.modal', function (e) {
				$('#myMsg').text("确定要删除吗？");
			});
			$('#myModal').modal('show');
		}
		
		function delSure(){
			$('#myModal').modal('hide');
			delItems();
		}
	</script>
</body>
</html>